<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-09-25 09:48:13
 * @LastEditTime: 2024-03-30 14:19:04
 * @FilePath: \client\src\pages\order\list.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<yplayout>
		<template #header="props">
			<div class="flex items-center">
				<i class="ri-2x text-gray-500 ml-2" :class="props.meta.icon || 'ri-information-line'"></i>
				<div class="text-xl px-2" v-html="props.meta.title"></div>
				<div class="text-gray-400"></div>
			</div>
			<div class="flex-1"></div>
			<button
				class="btn btn-chen mr-4"
				type="button"
				@click="router.push('add')"
				v-if="autBtn('order').indexOf('add') >= 0"
			>
				<i class="ri-add-line ri-lg pr-1"></i>
				增加
			</button>
		</template>
		<template #list>
			<div class="grid text-sm px-4 space-y-2 *:flex *:items-center md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
				<div class="mt-2">
					<div class="w-24 text-right pr-5">所属企业</div>
					<div class="flex-1">
						<companyInput v-model="queryParams.company_id" />
					</div>
				</div>
				<div>
					<div class="w-24 text-right pr-5">单号</div>
					<div class="flex-1">
						<ypinput v-model="queryParams.sn" placeholder="请输入单号"></ypinput>
					</div>
				</div>
				<div>
					<div class="w-24 text-right pr-5">金额</div>
					<div class="flex-1">
						<ypinput type="number" v-model="queryParams.money" placeholder="请输入金额"></ypinput>
					</div>
				</div>
				<template v-if="showAll">
					<div>
						<div class="w-24 text-right pr-5">备注</div>
						<div class="flex-1">
							<ypinput v-model="queryParams.intro" placeholder="请输入备注"></ypinput>
						</div>
					</div>
					<div>
						<div class="flex basis-1/4 grow items-center">
							<div class="w-24 text-right pr-5">状态</div>
							<div class="flex-1">
								<ypswitch v-model="queryParams.status"></ypswitch>
							</div>
						</div>
					</div>
				</template>
				<div
					:class="[
						'md:col-start-2 lg:col-start-3 xl:col-start-4',
						'justify-end',
						'space-x-2',
					]"
				>
					<button class="btn btn-lan" @click="toSearch">查询</button>
					<button class="btn" @click="reset">重置</button>
					<div v-if="showAll" class="text-lan-300 cursor-pointer" @click="showAll = false">
						<span>收起</span>
						<i class="ri-arrow-up-s-line ri-lg"></i>
					</div>
					<div v-else class="text-lan-300 cursor-pointer" @click="showAll = true">
						<span>展开</span>
						<i class="ri-arrow-down-s-line ri-lg"></i>
					</div>
				</div>
			</div>
			<table class="yp-table-datalist">
				<thead>
					<tr>
						<th>ID</th>
						<th>单号</th>
						<th>所属企业</th>
						<th class="min-w-16">状态</th>
						<th>金额</th>

						<th>录入时间</th>
						<th>备注</th>
						<th>业务员</th>
						<th class="w-40 text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item, index) in dataList" :key="index">
						<td>{{ item.id }}</td>
						<td>{{ item.sn }}</td>
						<td>{{ item.orderCompany && item.orderCompany.name }}</td>
						<td>
							<span class="text-red-500" v-if="item.status === -1">{{ item.status_text }}</span>
							<span class="text-chen-300" v-else-if="item.status === 1">{{ item.status_text }}</span>
							<span class="text-green-500" v-else-if="item.status === 2">{{ item.status_text }}</span>
						</td>
						<td>￥{{ item.money }}</td>
						
						<td>{{ item.create_time }}</td>
						<td class="hidden xl:block">{{ item.intro }}</td>
						<td>{{ item.admin_id_name }}</td>
						<td class="flex justify-center space-x-2">
	
								<button
									class="btn btn-lan"
									@click="router.push(`view?id=${item.id}`)"
									v-if="autBtn('order').indexOf('view') >= 0"
								>
									查看
								</button>
								<button
									class="btn btn-chen"
									@click="router.push(`edit?id=${item.id}`)"
									v-if="autBtn('order').indexOf('edit') >= 0 && item.status === -1"
								>
									编辑
								</button>
								<button
									class="btn btn-hong"
									@click="destory(item.id)"
									v-if="autBtn('order').indexOf('delete') >= 0"
								>
									删除
								</button>
								<button
									class="btn btn-qin"
									@click="router.push(`enabled?id=${item.id}`)"
									v-if="autBtn('order').indexOf('enabled') >= 0"
								>
									审核
								</button>
	
						</td>
					</tr>
				</tbody>
			</table>
			<div class="mt-3" v-if="pageData.pageCount > 1">
				<yppage @topage="topage" :pageData="pageData" />
			</div>
		</template>
	</yplayout>
</template>
<script setup>
	import { useRouter } from 'vue-router'
	import store from '@/store'
	import { onMounted, ref, reactive, computed, watch } from 'vue'
	import { getData, postData, alter, confirms, autBtn } from '@/common/base'
	import companyInput from './components/companyInput.vue'
	//变量
	const router = useRouter()
	const dataList = reactive([])
	const showAll = ref(false)
	const queryParams = reactive({
		company_id: ''
	})
	//分页
	const limit = ref(5)
	const pageData = reactive({
		totalRecords: 0, //总记录数
		pageCount: 0, //总页数
		currentPage: router.currentRoute.value.query.page || 1 //当前页
	})
	// 侦听是否要刷新列表
	const v = computed(() => store.state.sock.v.relist)
	watch(
		() => v.value,
		function (newVal) {
			if (newVal) {
				getDataList()
			}
		}
	)
	//方法
	const reset = () => {
		for (let key in queryParams) {
			queryParams[key] = ''
		}
	}
	const destory = async (id) => {
		confirms({ text: '确认删除吗？' })
			.then(async () => {
				const resp = await postData('order/delete', { ids: id })
				if (resp.code == 1) {
					alter({ type: 'alter-success', text: resp.msg })
					getDataList()
				}
			})
			.catch((e) => {})
	}
	const topage = (page) => {
		pageData.currentPage = page
		router.push('?page=' + page)
		getDataList()
	}
	const toSearch = () => {
		const query = []
		Object.keys(queryParams).forEach((col) => {
			query.push({ col, value: queryParams[col] || '' })
		})
		pageData.currentPage = 1
		router.push('?page=1')
		getDataList(query)
	}
	const getDataList = async (query = []) => {
		const res = await getData('order/index', {
			query,
			page: pageData.currentPage,
			limit: limit.value
		})
		const { data, last_page, total } = res.data
		if (pageData.currentPage > last_page && last_page !== 0) {
			topage(1)
		} else {
			pageData.totalRecords = total
			pageData.pageCount = last_page
			dataList.length = 0
			data.map((item) => {
				dataList.push(item)
			})
		}
	}
	onMounted(() => {
		getDataList()
	})
</script>
